{extend name="layout/base"}

{block name="content"}

<div class="layui-row">
    <button style="margin: 10px" class="layui-btn layui-btn-sm" id="addRole"><i class="layui-icon layui-icon-add-1"></i>添加
    </button>
</div>
<table class="layui-form" id="table" lay-filter="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>

<script>
    layui.use(['jquery', 'table'], function ($, table) {

        $('#addRole').click(function () {
            location.href = "{:url('role/add')}"
        });

        var opt = {
            elem: "#table",
            url: "{:url('')}",
            cols: [[
                {field: 'role_id', title: 'ID'},
                {field: 'role_name', title: '角色名称'},
                {field: 'purview_name', title: '权限名称'},
                {title: '操作', toolbar: '#tool'}
            ]]
        },

        tabIns = table.render(opt);

        table.on('tool(table)', function (obj) {
            var id = obj.data.role_id;
            switch (obj.event) {
                case 'edit':
                    location.href = "{:url('role/edit')}?role_id=" + id
                    break;
                case 'del':
                    layer.confirm('确定要删除吗', {icon: 3, title:'提示'},function (index) {
                        $.get("{:url('role/del')}",{id:id});
                        layer.close(index);
                        tabIns.reload(opt)
                    });
                    break;
                default:
                    break;
            }

        })
    });
</script>
{/block}